/**
* 功能描述: 文本输入框demo
* @author 崔孝楠
* @date 2022/9/27 8:39
* @version 1.0
*/
<template>
  <div style="width: 500px">
    <!-- 前缀后缀 -->
    <span class="yw-input-affix-wrapper" id="yw-input-affix-wrapper" style="margin-bottom: 10px" >
      <span class="yw-input-prefix">
        <!-- 前缀 -->
        <svg focusable="false" class="" data-icon="user" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path>
        </svg>
      </span>
      <input class="yw-input" placeholder="ywTextInput" @focus="addFocused('yw-input-affix-wrapper')" @blur="removeFocused('yw-input-affix-wrapper')"  />
      <span class="yw-input-suffix">
        <!-- 后缀 -->
        <svg focusable="false" class="" data-icon="info-circle" fill="rgb(0, 0, 0, 0.25)" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
        </svg>
      </span>
    </span>

    <!-- 前置后置 -->
    <span class="yw-input-group-wrapper" style="margin-bottom: 10px" >
      <span class="yw-input-group" >
        <span class="yw-input-group-addon">http://</span>
        <input class="yw-input" placeholder="ywTextInput" />
        <span class="yw-input-group-addon">.com</span>
      </span>
    </span>

    <!-- 带清除按钮 -->
    <span class="yw-input-affix-wrapper" id="yw-input-clear" style="margin-bottom: 10px" >
      <input class="yw-input" placeholder="ywTextInput" @focus="addFocused('yw-input-clear')" @blur="removeFocused('yw-input-clear')" />
      <span class="yw-input-suffix">
        <!-- 清空按钮 -->
        <svg class="icon yw-input-clear-icon yw-input-clear-icon-show yw-input-clear-icon-has-suffix" t="1664244275793" viewBox="0 0 1024 1024" p-id="2691">
          <path d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z" p-id="2692"></path>
          <path d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z" p-id="2693"></path>
        </svg>
      </span>
    </span>

    <!-- 无边框 -->
    <span class="yw-input-affix-wrapper yw-input-affix-wrapper-borderless" >
      <input class="yw-input" placeholder="ywTextInput" />
    </span>
  </div>

</template>

<script>
export default {
  name: "index",
  methods: {
    /**
     * 添加选中时样式
     */
    addFocused(id) {
      let inputNumberDiv = document.getElementById(id)
      inputNumberDiv.classList.add('yw-input-affix-wrapper-focused')
    },
    /**
     * 移除选中时样式
     */
    removeFocused(id) {
      let inputNumberDiv = document.getElementById(id)
      inputNumberDiv.classList.remove('yw-input-affix-wrapper-focused')
    }
  }
}
</script>

<style scoped>

</style>
